<template>
    <Card style="height: 100%">
        <Button type="primary" style="margin-bottom: 20px" @click="addConfig">新增配置</Button>
        <Table :columns="columns" :data="data" border>
            <template slot-scope="{ row }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(row)">编辑</Button>
                <Button type="error" size="small" @click="remove(row.id)">删除</Button>
            </template>
        </Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" :current="searchForm.page" :page-size="searchForm.page_size" @on-change="handleChange"
                @on-page-size-change="handleSize" show-sizer show-total show-elevator/>
            </div>
        </div>
        <Modal v-model="visible" :title="title"  width="30">
            <Form ref="ConfigFormValidate" :model="configForm" :rules="ruleconfigForm" style="margin-top: 20px" :label-width="80">
                <FormItem label="配置名称" prop="name">
                    <Input v-model="configForm.name" placeholder="请输入"/>
                </FormItem>
                <FormItem label="配置值" prop="value">
                    <Input v-model="configForm.value" type="textarea" :rows="4" placeholder="请输入"/>
                </FormItem>
                <FormItem label="配置描述" prop="description">
                    <Input v-model="configForm.description" type="textarea" :rows="4" placeholder="请输入"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="ok">确定</Button>
            </div>
        </Modal>
    </Card>
</template>
<script>
import {addConfig, configSearchList} from "@/utils/api";

const columns = [
    {
        title: '变量名称',
        key: 'name'
    },
    {
        title: '变量值',
        key: 'value'
    },
    {
        title: '变量描述',
        key: 'description'
    },
    {
        title: '操作',
        slot: 'action',
        width: 150,
        align: 'center'
    }
]

export default {
    name: "config",
    data() {
        return {
            visible: false,
            edit: false,
            title: '新增配置',
            columns,
            data: [],
            searchForm: {
                project: null,
                page: 1,
                size: 10
            },
            configForm: {
                name: '',
                value: '',
                description: '',
                project: parseInt(localStorage.getItem("project"))
            },
            total: 0,
            ruleconfigForm: {
                name: [
                    {required: true, message: '配置key必填', trigger: 'blur'}
                ],
                value: [
                    {required: true, message: '配置value必填', trigger: 'blur'}
                ],
                description: [
                    {required: true, message: '配置描述必填', trigger: 'blur'}
                ]
            },
        }
    },
    watch: {
        selectProject(newVal, oldVal) {
            this.configForm.project = parseInt(newVal);
        }
    },
    computed: {
        selectProject: {
            get() {
                console.log('1111')
                return this.$store.state.selectProject;
            },
            set(value) {
                console.log('2222')
                this.$store.commit("updateSelectProject", value)
            }
        }
    },
    created() {
        this.query()
    },
    methods: {
        handleEdit(e){
            console.log(e)
        },
        remove(e) {
            console.log(e)
        },
        handleChange(e){
            this.searchForm.page = e;
        },
        handleSize(e){
            this.searchForm.size = e
        },
        addConfig(){
            this.visible = true
        },
        cancel() {
            this.edit = false;
            this.$refs['ConfigFormValidate'].resetFields();
            this.visible = false;
        },
        ok(){
            this.$refs['ConfigFormValidate'].validate((valid) => {
                if (valid) {
                    if (!this.edit) {
                        addConfig(this.configForm).then(res => {
                            if (res.data.result === 1){
                                console.log(res)
                                this.$Message.success("添加成功!")
                            }
                        })
                    }
                }
            })
        },
        query() {
            this.searchForm.project = parseInt(localStorage.getItem("project"))
            configSearchList(this.searchForm).then(res => {
                if (res.data.result === 1) {
                    this.data = res.data.data.list;
                    this.total = res.data.data.total;
                }
            })
        }
    }
}

</script>
<style scoped>

</style>
